<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 循环 实例练习 </title>
    <script type="text/javascript" src="../assets/vue.js"></script>

</head>
<body>
<div id="app">
    <h3> {{message}}</h3>
    <hr>
    <ul>
        <li v-for="item in newitems">
            {{item}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,index) in myname">
            {{index+1}}--{{item.name}}--{{item.age}}
        </li>
    </ul>
</div>

<script>
    //v-for 对数组进行 循环,
    //需要让 哪个标签 进行循环  就 加到 哪个标签 属性上
    //computed 计算属性 ， 对  数据源 data 输出前  进行 处理
    //这里循环了两种类型 一种是数组，一种是 数组对象

    var data = {
        message:"v-for 循环指令 练习,需要让 哪个标签 进行循环  就 加到 哪个标签 属性上",
        items:['php','java','golang','python','linux'],
        myname:[
            {'name':'panpan','age':'32'},
            {'name':'xiariyanhuo','age':'28'},
            {'name':'huoqiling','age':'25'},
            {'name':'飞龙在天','age':'22'}
        ]
    };

    var app = new Vue({
        el:'#app',
        data:data,
        computed:{
            //这里 再 对 items 进行 排序操作时，计算属性要从新命名 ，模板里的 循环 属性 也需改为新的 属性
            newitems:function () {
                return this.items.sort(sortNum);
            }
        }
    });
    //这个函数是对 js  本身的排序缺陷的一个 弥补 函数 ，例如 数字为两位时，排序 只 会按 第一位排序
    //定义 此函数 后 直接传入 sort 排序函数里 即可
    function sortNum(a,b) {
        return a-b;
    }
</script>
</body>
</html>